<template>
  <div class="list">
    <Box>
      <div slot="box">
        <a-row :gutter="20" style="display: flex;align-items: center;">
          <a-col :span="6" class="gutter-row">
            <div style="width: 25%">预案类型：</div>
            <div style="width: 75%">
              <a-select v-model="querys" default-value="" style="width: 100%" @change="handleChange1" placeholder="请选择">
                <a-select-option v-for="(item,index) of this.lis" :value="item.planName" :key="index" >
                  {{ item.planName }}
                </a-select-option>
              </a-select>
            </div>
          </a-col>
          <a-col :span="6">
            <a-button type="primary" @click="query">查询</a-button>
            <a-button style="margin-left: 10px;" @click="chongzhi">重置</a-button>
          </a-col>
        </a-row>
      </div>
    </Box>
    <Box>
      <div slot="box">
        <div style="padding-bottom: 15px">
          <a-button style="margin-left: 15px" @click="addList">添加预案</a-button>
        </div>
        <div>
          <a-empty v-if="this.li.records.length == 0"/>
          <a-row :gutter="16" v-else>
            <a-col :span="8" v-for="(item,index) of this.li.records" :key="index">
              <Box>
                <div slot="box" style="height: 170px;position:relative;" >
                  <div style="display: flex;justify-content: space-between;margin-bottom: 5px">
                    <h3>{{ item.name }}</h3>
                    <div>{{ item.createTime }}</div>
                  </div>
                  <p class="box">预案措施：{{ item.measures }}</p>
                  <div style="position: absolute;bottom: 0;right: 0;">
                    <a-button type="link" style="padding:0;color: #888888" @click="deleteLi(item.id)">删除</a-button>
                    <a-divider type="vertical" />
                    <a-button type="link" style="padding:0;"@click="textList(item)">编辑</a-button>
                    <a-divider type="vertical"/>
                    <a-button type="link" style="padding:0;" @click="look(item.id)">查看详情</a-button>
                  </div>
                </div>
              </Box>
            </a-col>
          </a-row>

        </div>
        <div>
          <a-pagination
            :page-size.sync="pageSize"
            v-model="current"
            :total="total*pageFilter.pageSize"
            @showSizeChange="onShowSizeChange"
          />
        </div>
      </div>
    </Box>
  </div>
</template>

<script>
import Box from '@/views/xlgc/Box/index'
import {getManageList, getTypeLints, getTypeList, getTypeLists, stateManage} from '@api/xlgc/plan'
export default {
  name: 'List',
  components: { Box },
  data() {
    return {
      querys: undefined,
      name: '',
      li: [],
      lis: [],
      total: 0,
      pageSize: 9,
      current: 1,
      pageFilter: {
        pageNo: 1,
        pageSize: 9
      }
    }
  },
  mounted() {
    this.refreshTable(this.pageFilter)
    // this.refreshTable()
    this.refreshTable1()
  },
  methods: {
    // 操作部
    query() {
      this.refreshTable(Object.assign({}, this.pageFilter, { planCategory: this.querys }))
    },
    chongzhi() {
      this.querys = undefined
      this.refreshTable(this.pageFilter)
    },
    // 编辑
    textList(val) {
      // console.log(val)
      this.$router.push({
        path: '/manage/addList',
        query: {
          item: true,
          id: val.id
        }
      })
    },
    look(val) {
      console.log(val)
      this.$router.push({
        path: '/manage/details',
        query: {
          id: val
        }
      })
    },
    onShowSizeChange(current, pageSize) {
      console.log(current, pageSize)
    },
    deleteLi(val) {
      let that = this
      this.$confirm({
        title: '确定删除该条数据？',
        okText: '确定',
        onOk() {
          stateManage([val])
          .then(res => {
            that.refreshTable(that.pageFilter)
            that.$message.success(res.message, 2)
            // that.success()
            console.log(res, val)
          })
          .catch(e => {
            that.$message.warn('请求失败！')
          })
        }
      })
    },
    addList() {
      this.$router.push({
        path: '/manage/addList',
        query: {
          item: false
        }
      })
    },
    // 处理部
    handleChange1(val) {
      console.log(val)
      return val
    },
    success() {
      this.$message.success(
        '删除成功',
        3
      )
    },
    // 请求部
    refreshTable(val) {
      getManageList(val)
        .then(res => {
          console.log(res)
          this.li = res.result
          this.total = res.result.pages
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    },
    refreshTable1() {
      getTypeLints()
        .then(res => {
          console.log(res)
          this.lis = res
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    }
  },
  watch: {
    current: {
      deep: true,
      handler(a, b) {
        this.pageFilter.pageNo = this.current
        this.refreshTable(this.pageFilter)
      }
    }
  }
}
</script>

<style scoped>
div /deep/.he{
  margin: 10px 0 !important;
}
.gutter-row{
  display: flex;
  align-items: center;
}
.box {
  width: 100%;
  /*height: 50%;*/
  display: -webkit-box;
  /* autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  -webkit-line-clamp: 2;
  word-break:break-all;
  overflow: hidden;
  text-overflow: ellipsis;

}
</style>
